<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	<span>内联模式</span>
	<div>这种模型是最传统简单的一种处理事件的方法。在内联模型中，事件处理函数时html标签的一个属性
		用于处理指定事件。虽然内联在早期使用较多，但它是和html混写的，并没有与html分离
		例如 	onclick
	</div>
	<span>脚本模型</span>
	<div>
		例如 input.onclick</div>
	<hr style="height:3px;border:none;border-top:3px double red;" />
	
	<input type="button" value="按钮" onclick="box()" />
	<input type="text"/>
	</body>
	
	<script>
	function box(){
		alert(1);
	}
	window.onload=function(){
		var input =document.getElementsByTagName('input')[0];
		
		//对象.事件处理函数=函数名或匿名函数
		
		//1鼠标事件
		input.onclick =function(){
			alert('lee');
		};
		//input.onclick =box;//如果有括号自动执行，没有括号为函数赋值，需要点击
		
		//双击
		input.ondblclick =box;
		//当用户按下鼠标还未弹起是触发
		//onmousedown
		//当用户释放鼠标时按钮触发
		//onmouseup
		//当鼠标移到某个元素上时触发
		//onmouseover
		//当鼠标移除某个元素上方时触发
		//onmouseout
		
		
		//2键盘事件
		//当用户按下键盘上任意键触发，如果按住不放会重发触发
	/*	onkeydown =function(){
			alert('onkeydown');
		};*/
		//当用户按下键盘上的字符键触发，如果按住不放会重复触发
	/*	onkeypress = function(){
			alert('onkeypress');
		};*/
		
		//当用户释放键盘上的键触发
		/*onkeydown = function(){
			alert('onkeydown')
		};*/
		
		
		//html事件
		//load 当页面完全加载后再window上面触发，或当框架集加载完毕后再框架集上触发。
	/*	window.onload = function(){
			alert('load');
		}*/
		
		//当页面卸载后再window上面触发，或当框架集卸载后再框架集上触发
	/*	window.onunload = function(){//如刷新
			alert('onunload');
		};*/
		var input1 =document.getElementsByTagName('input')[1];
		//当用户选择文本框（input或textarea）中的一个或多个字符触发
		input1.onselect=function(){
			alert('onselect');
		}
		//当文本框内容改变且失去焦点后触发
		input1.onchange=function(){
			alert("onchange")
		}
		//单页面或者元素获得焦点是在window及相关元素上面触发
		onfocus
		//当页面或元素失去焦点时在window及相关元素上触发
		onblur
		//当用户点击提交按钮在<form>元素上触发
		//form.onsubmit =function(){}
		//当用户点击重置按钮在form元素上触发
		onreset
		//当窗口或者框架的大小变化时在window或框架上触发
		onresize
		
		//当用户滚动带滚动条的元素时触发
		onscroll
	}
	</script>
</html>
